<template>
  <!-- 统计卡片 -->
  <div class="statistics-cards" style="margin-bottom: 20px;">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number blue">{{ orderCount }}</div>
            <div class="stat-label">入库单数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number blue">{{ totalQuantity }}</div>
            <div class="stat-label">入库货品数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number green">{{ totalAmount.toFixed(2) }}</div>
            <div class="stat-label">入库货品金额</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <el-table :data="tableData" border style="width: 100%; margin-bottom: 20px;">
    <el-table-column prop="associatedOrderNumber" label="订单号" width="130" />
    <el-table-column prop="productCode" label="产品编码" width="130"/>
    <el-table-column prop="productName" label="产品名称" width="130" />
    <el-table-column prop="specifications" label="规格"  width="130" />
    <el-table-column prop="bacth" label="批次" width="130" />
    <el-table-column prop="price" label="单价" width="130" />
    
    <el-table-column prop="incomingQuantity" label="入库数量" width="130" />
    <el-table-column label="总价格" width="130">
  <template #default="scope">
    {{ (Number(scope.row.price) * Number(scope.row.incomingQuantity)).toFixed(2) }}
  </template>
</el-table-column>
    <el-table-column prop="supplierName" label="供销商名称" width="130" />
    <el-table-column prop="locationName" label="库位名称" width="130" />
    <el-table-column label="操作" width="100">
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { http } from '@/axios/axiosHelpers'

// 定义数据接口
interface StockItem {
  associatedOrderNumber: string
  productCode: string
  productName: string
  specifications: string
  bacth: string
  price: number
  incomingQuantity: number
  supplierName: string
  locationName: string
}

// 分页配置
const page = ref({
  PageIndex: 1,
  PageSize: 10,
  pageCount: 0,
  totaCount: 0,
})

// 表格数据
const tableData = ref<StockItem[]>([])

// 统计数据
const orderCount = ref(0)
const totalQuantity = ref(0)
const totalAmount = ref(0)

// 计算统计数据
const calculateStatistics = () => {
  if (tableData.value && tableData.value.length > 0) {
    // 调试信息
    console.log('当前表格数据:', tableData.value)
    console.log('订单号列表:', tableData.value.map((item: StockItem) => item.associatedOrderNumber))
    
    // 计算入库单数量（去重，过滤空值）
    const orderNumbers = tableData.value
      .map((item: StockItem) => item.associatedOrderNumber)
      .filter((orderNumber: string) => orderNumber && orderNumber.trim() !== '')
    
    const uniqueOrders = new Set(orderNumbers)
    orderCount.value = uniqueOrders.size
    
    console.log('去重后的订单号:', Array.from(uniqueOrders))
    console.log('入库单数量:', orderCount.value)
    
    // 计算总入库数量
    totalQuantity.value = tableData.value.reduce((sum: number, item: StockItem) => {
      return sum + (Number(item.incomingQuantity) || 0)
    }, 0)
    
    // 计算总金额
    totalAmount.value = tableData.value.reduce((sum: number, item: StockItem) => {
      const price = Number(item.price) || 0
      const quantity = Number(item.incomingQuantity) || 0
      return sum + (price * quantity)
    }, 0)
  } else {
    orderCount.value = 0
    totalQuantity.value = 0
    totalAmount.value = 0
  }
}

// 获取所有数据来计算统计信息
const getAllDataForStatistics = () => {
  http.get("/basicread/api/Stocking/GetProduct", {
    params: {
      PageIndex: 1,
      PageSize: 9999, // 获取所有数据
    }
  })
  .then(res => {
    if (res.data.pageData && res.data.pageData.length > 0) {
      // 使用所有数据来计算统计
      const allData: StockItem[] = res.data.pageData
      console.log('所有数据:', allData)
      
      // 计算入库单数量（去重，过滤空值）
      const orderNumbers = allData
        .map((item: StockItem) => item.associatedOrderNumber)
        .filter((orderNumber: string) => orderNumber && orderNumber.trim() !== '')
      
      const uniqueOrders = new Set(orderNumbers)
      orderCount.value = uniqueOrders.size
      
      console.log('所有订单号:', orderNumbers)
      console.log('去重后的订单号:', Array.from(uniqueOrders))
      console.log('入库单数量:', orderCount.value)
      
      // 计算总入库数量
      totalQuantity.value = allData.reduce((sum: number, item: StockItem) => {
        return sum + (Number(item.incomingQuantity) || 0)
      }, 0)
      
      // 计算总金额
      totalAmount.value = allData.reduce((sum: number, item: StockItem) => {
        const price = Number(item.price) || 0
        const quantity = Number(item.incomingQuantity) || 0
        return sum + (price * quantity)
      }, 0)
    }
  })
  .catch(error => {
    console.error('获取统计数据失败:', error)
  })
}

// 获取表格数据
const tableDataData = () => {
  const params: any = {
    PageIndex: page.value.PageIndex,
    PageSize: page.value.PageSize,
  };
  http.get("/basicread/api/Stocking/GetProduct", { params })
    .then(res => {
      tableData.value = res.data.pageData;
      page.value.pageCount = res.data.pageCount;
      page.value.totaCount = res.data.totaCount;
      // 计算统计数据
      calculateStatistics();
    })
    .catch(error => {
      console.error('获取表格数据失败:', error)
    })
}

// 页面初始化
onMounted(() => {
  tableDataData();
  // 获取所有数据来计算准确的统计信息
  getAllDataForStatistics();
})

</script>

<style scoped>
.statistics-cards {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  padding: 10px;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-number.blue {
  color: #409eff;
}

.stat-number.green {
  color: #67c23a;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>